<!DOCTYPE html>
<html lang="zh">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="./bulma.min.css" rel="stylesheet">
<link href="./css/all.min.css" rel="stylesheet">
<!-- 引入Vue.js -->
<script src="./js/Vue.js"></script>
<title>用户积分</title>
</head>

<body>
<div id="app">
    <section class="section top-section-bg">
        <div class="level is-mobile is-justify-content-space-around">
            <div class="level-left">
                <div class="level-item has-text-centered">
                    <div>
                        <p class="title has-text-white">0</p>
                        <p class="heading has-text-white">正式积分</p>
                    </div>
                </div>
                <div class="level-item has-text-centered">
                    <div>
                        <button class="button  is-rounded is-fixed-width" @click="testMethod"
                                style="color: blue; font-weight: 600;">消费记录</button>
                    </div>
                </div>
            </div>
            <div class="level-right">
                <div class="level-item has-text-centered">
                    <div>
                        <p class="title has-text-white">0</p>
                        <p class="heading has-text-white">临时积分</p>
                    </div>
                </div>
                <div class="level-item has-text-centered">
                    <div>
                        <button class="button is-link is-rounded is-primary is-fixed-width "
                                style="color: white; font-weight: 600;">去充值</button>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <article class="panel is-link">
        <p class="panel-heading panel-heading-style is-size-6">获取积分</p>
        <div class="box">
            <article class="media mt-0 mb-0">
                <div class="media-left">
                    <figure class="image mt-1">
                        <svg t="1722971422863" class="icon" viewBox="0 0 1024 1024" version="1.1"
                             xmlns="http://www.w3.org/2000/svg" p-id="1553" width="64" height="64">
                            <path
                                    d="M438.89 549.38c-21.06 0-38.31-17.06-38.31-38.14 0-21.08 16.93-38.14 37.99-38.14 61.87 0 117.42-34.04 145.32-88.83 40.69-79.89 8.72-178.04-71.27-218.82-79.88-40.52-178.02-8.68-218.75 71.33-23.93 46.86-23.54 102.73 1.02 149.51 9.8 18.62 2.63 41.68-16.02 51.47-18.66 9.8-41.73 2.64-51.51-16.02-36.07-68.65-36.61-150.74-1.45-219.64C285.67 84.69 429.83 37.69 547.24 97.47c117.48 59.89 164.41 204.04 104.63 321.4-40.98 80.49-122.59 130.51-212.98 130.51zM692.16 671.59c-11.21 0-22.33-4.92-29.87-14.38-17.23-21.68-37.49-40.71-60.21-56.61-17.26-12.07-21.47-35.87-9.39-53.11 12.09-17.28 35.83-21.42 53.11-9.39a364.639 364.639 0 0 1 76.19 71.59c13.11 16.5 10.37 40.49-6.11 53.6a37.971 37.971 0 0 1-23.72 8.3z"
                                    fill="#050500" p-id="1554"></path>
                            <path
                                    d="M117.5 910.49c-18.94 0-35.37-14.08-37.79-33.37-1.66-13.26-2.48-27.12-2.48-42.39 0-199.42 162.23-361.63 361.65-361.63 21.06 0 38.14 17.06 38.14 38.14 0 21.08-17.08 38.14-38.14 38.14-157.35 0-285.36 128.02-285.36 285.35 0 11.14 0.52 21.98 1.88 32.85 2.63 20.9-12.18 39.97-33.07 42.61-1.62 0.18-3.23 0.3-4.83 0.3z"
                                    fill="#050500" p-id="1555"></path>
                            <path
                                    d="M912.16 785.82H572.1c-21.06 0-38.14-17.06-38.14-38.14s17.08-38.14 38.14-38.14h340.06c21.06 0 38.14 17.06 38.14 38.14s-17.08 38.14-38.14 38.14z"
                                    fill="#1D75B3" p-id="1556"></path>
                            <path
                                    d="M742.13 955.85c-21.06 0-38.14-17.06-38.14-38.14V577.65c0-21.08 17.08-38.14 38.14-38.14s38.14 17.06 38.14 38.14v340.06c0 21.08-17.08 38.14-38.14 38.14z"
                                    fill="#1D75B3" p-id="1557"></path>
                        </svg>
                    </figure>
                </div>
                <div class="media-content is-flex">
                    <div class="content">
                        <p>
                            <strong>邀请好友赚取积分</strong>
                            <br />
                            <small class="is-size-7 has-text-text-70">成功邀请好友注册，每天最高可获取<text
                                    style="color: red;">10</text>正式积分</small>
                        </p>
                    </div>
                    <div>
                        <button class="button is-white">
                            <span class="has-text-link">去邀请</span>
                            <span class="icon has-text-link">
                                    <i class="fas fa-chevron-right"></i>
                                </span>
                        </button>
                    </div>
                </div>
            </article>
            <article class="media mt-0 mb-0">
                <div class="media-left">
                    <figure class="image mt-1">
                        <svg t="1722972908742" class="icon" viewBox="0 0 1024 1024" version="1.1"
                             xmlns="http://www.w3.org/2000/svg" p-id="7128" width="64" height="64">
                            <path
                                    d="M790.784 165.12H728.576v-5.8368c0-41.1136-33.4336-74.5472-74.5472-74.5472H380.4672c-41.1136 0-74.5472 33.4336-74.5472 74.5472v5.8368H243.712c-63.2832 0-114.7392 51.5072-114.7392 114.7904v547.072c0 63.2832 51.456 114.7904 114.7392 114.7904h547.072c63.2832 0 114.7904-51.5072 114.7904-114.7904V279.9104c0-63.2832-51.5072-114.7904-114.7904-114.7904z m-413.184-5.7856c0-1.5872 1.28-2.8672 2.8672-2.8672h273.5616c1.5872 0 2.8672 1.28 2.8672 2.8672v87.2448c0 1.5872-1.28 2.8672-2.8672 2.8672H380.4672a2.8672 2.8672 0 0 1-2.8672-2.8672V159.3344z m456.2944 667.648c0 23.7568-19.3536 43.1104-43.1104 43.1104H243.712c-23.7568 0-43.0592-19.3536-43.0592-43.1104V279.9104c0-23.7568 19.3024-43.1104 43.0592-43.1104h62.208v9.728c0 41.1136 33.4336 74.5472 74.5472 74.5472h273.5616c41.1136 0 74.5472-33.4336 74.5472-74.5472v-9.728h62.208c23.7568 0 43.1104 19.3536 43.1104 43.1104v547.072z"
                                    fill="#4D4D4D" p-id="7129"></path>
                            <path
                                    d="M481.9456 688.4864c-9.0112 0-17.9712-3.3792-24.9344-10.0864l-124.16-120.2688a35.84 35.84 0 0 1-0.8192-50.688 35.84 35.84 0 0 1 50.688-0.8192l98.7648 95.6416 169.8304-170.9568c13.9264-14.0288 36.6592-14.1312 50.688-0.1536 14.0288 13.9264 14.1312 36.6592 0.1536 50.688L507.392 677.888a35.7376 35.7376 0 0 1-25.4464 10.5984z"
                                    fill="#5E9EFC" p-id="7130"></path>
                        </svg>
                    </figure>
                </div>
                <div class="media-content is-flex">
                    <div class="content">
                        <p>
                            <strong>做任务赚取积分</strong>
                            <br />
                            <small class="is-size-7 has-text-text-70">完成任务可获取正式积分奖励，海量积分等你来拿！</small>
                        </p>
                    </div>
                    <div>
                        <button class="button is-white">
                            <span class="has-text-link is-size-6">去完成</span>
                            <span class="icon has-text-link">
                                    <i class="fas fa-chevron-right"></i>
                                </span>
                        </button>
                    </div>
                </div>
            </article>
        </div>
    </article>
    <div class="box">
        <article class="media">

            <div class="media-content">
                <div class="content">
                    <p>
                        <strong>温馨提示</strong>
                        <br />
                        <small>如有疑问，请与河狸帮客服联系</small>
                    </p>
                </div>
            </div>
        </article>
    </div>
</div>
</body>
<script>
    // 创建一个Vue实例
    new Vue({
      el: '#app',
      data: {
        message: 'Hello, Vue in HTML5!'
      },
      methods: {
        testMethod(){
            Android.toRecord();
        }
      },
    });
</script>
<style>
    .is-fixed-width {
        min-width: 110px;
        /* 您可以根据需要设置固定宽度 */
    }

    .top-section-bg {
        background-image: url('./images/userIntegralTopBg.png');
        background-size: contain;
    }

    .panel-heading-style {
        margin-top: -10px;
        background-color: white;
        color: black;
    }
</style>

</html>